<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bootstrap-datetimepicker with Bootstrap 3</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="//code.jquery.com/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="./css/bootstrap-datetimepicker.min.css" type="text/css" media="all" rel="stylesheet" />
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="./js/demo.js"></script>
</head>

<body>
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="https://github.com/monim67/bootstrap-datetimepicker">
                    <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 499.36" focusable="false" style="height: 1em; width: 1em;">
                        <title>GitHub</title>
                        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"
                            fill="currentColor" fill-rule="evenodd"></path>
                    </svg>
                    monim67/bootstrap-datetimepicker on Github
                </a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">Demo with Bootstrap 3
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li>
                        <a href="bootstrap4-demo.html">Demo with Bootstrap 4</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <h2 class="page-header">bootstrap-datetimepicker with Bootstrap 3</h2>
        <div class="row">
            <div class='col-sm-6'>
                <form action="" method="post">
                    <p>
                        <label>12hr Date-Time:</label>
                        <div class="input-group date" id="id_0">
                            <input type="text" value="05/16/2018 12:31:00 AM" class="form-control" required/>
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                            </span>
                        </div>
                    </p>
                    <p>
                        <label>24hr Date-Time:</label>
                        <div class="input-group date" id="id_1">
                            <input type="text" value="05/16/2018 11:31:00" class="form-control" required/>
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                            </span>
                        </div>
                    </p>
                    <p>
                        <label>12hr Time:</label>
                        <div class="input-group date" id="id_2">
                            <input type="text" value="12:31:00 AM" class="form-control" required/>
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-time fa fa-clock-o"></i>
                            </span>
                        </div>
                    </p>
                    <p>
                        <label>24hr Time:</label>
                        <div class="input-group date" id="id_3">
                            <input type="text" value="11:31:00" class="form-control" required/>
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-time fa fa-clock-o"></i>
                            </span>
                        </div>
                    </p>
                    <p>
                        <label>Date only:</label>
                        <div class="input-group date" id="id_4">
                            <input type="text" value="05/16/2018" class="form-control" required/>
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                            </span>
                        </div>
                    </p>
                </form>
            </div>
        </div>
    </div>

</body>

</html>